<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="oSend">发送消息</button>
  <button id="oClose">关闭连接</button>
  <script>
    // !#1 创建ws实例，建立连接  (ws://121.40.165.18:8800  有广告)
    var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
    // !#2 一旦链接成功就会自动的触发 onopen 事件
    ws.onopen = function (evt) {
      console.log("Connection open ...");
    };
    oSend.onclick = function () {
      // !#3 通过 wx.send 发送消息
      ws.send("Hello WebSockets!");
    }
    // !#4 通过监听 onmessage 接受消息
    ws.onmessage = function (evt) {
      console.log("Received Message: " + evt.data);
    };
    oClose.onclick = function () {
      // !#5 关闭连接  
      ws.close();
    }
    // !#6 关闭连接事件
    ws.onclose = function (evt) {
      console.log("Connection closed.");
    };
    // 最关键的是 send 方法去发送消息，和 onmessage 事件来接收消息
  </script>
</body>

</html>